/*
 * @Author: Xia_cc 978487464@qq.com
 * @Date: 2022-08-11 09:36:34
 * @LastEditors: Xia_cc 978487464@qq.com
 * @LastEditTime: 2022-08-12 14:55:23
 * @FilePath: \bpm-management-system\src\component\personnelmanage\Kaoqintongji.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Button,Table,Modal } from 'antd'
import React,{ useState } from 'react'
import InputModle from '../../../../comment/Inputmodal'
import "./linshifukuanshenqin.css"

export default function Kaoqintongji() {
  const linshifukuanTit = [
    {
      title: '序号',
      width: 100,
      dataIndex: 'key',
      key: 'name',
      align:'center',
      fixed: 'left',
    },
    {
      title: '标题',
      width: 100,
      dataIndex: 'age',
      align:'center',
      key: 'age',
      fixed: 'left',
    },
    {
      title: '拟付款日期',
      dataIndex: 'address',
      align:'center',
      key: '1',
    },
    {
      title: '付款金额（万）',
      dataIndex: 'address',
      width:150,
      align:'center',
      key: '2',
    },
    {
      title: '所属项目',
      dataIndex: 'address',
      align:'center',
      key: '3',
    },
    {
      title: '关联合同',
      dataIndex: 'address',
      align:'center',
      key: '4',
    },
    {
      title: '是否紧急',
      dataIndex: 'address',
      align:'center',
      key: '5',
    },
    {
      title: '申请人',
      dataIndex: 'address',
      align:'center',
      key: '6',
    },
    {
      title: '提交时间',
      dataIndex: 'address',
      align:'center',
      key: '7',
    },
    {
      title: '操作',
      key: 'operation',
      align:'center',
      fixed: 'right',
      width: 250,
      render: () => <>
                      <span className='action' >编辑</span>&nbsp;&nbsp;&nbsp;
                      <span className='action' onClick={showModal}>提交审核</span>&nbsp;&nbsp;&nbsp;
                      <span className='action' >详情</span>&nbsp;&nbsp;&nbsp;
                      <span className='action' >删除</span>
                    </>
    },
  ];
  const CaiLiaoCaiGouArr = [
    {
      key: '1',
      name: 'Jrown',
      age: 32,
      address: 'New Yk',
      align:'center',
    },
    {
      key: '2',
      name: 'Jim ',
      age: 40,
      align:'center',
      address: ' Park',
    },{
      key: '3',
      name: 'John Brown',
      age: 32,
      align:'center',
      address: 'York Park',
    },
    {
      key: '4',
      name: 'Jim Green',
      age: 40,
      align:'center',
      address: 'London',
    }
  ];

  //确认提交模态框
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div>
      <InputModle></InputModle>
      <Button type="primary" className='addBut'>新增材料采购付款申请</Button>
      <Table
          columns={linshifukuanTit}
          dataSource={CaiLiaoCaiGouArr}
          scroll={{
            x: 1300,
      }}
      />
       <Modal title="确认提交" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} centered okText="true">
        <h2 className='ifDel'>是否继续提交材料采购付款申请</h2>
        <p className='del'>提交后将不可撤回</p>
      </Modal>
    </div>
  )
}
